<script setup lang="ts">
import { nextTick, ref } from "vue";
import AddDevIcon from "@/assets/svg/devices/add_device.svg";
import GuideHelpIcon from "@/assets/svg/devices/guide_help.svg";
import SearchIcon from "@/assets/svg/devices/search.svg";
import DeviceList from "@/views/device/components/list.vue";
import { showMsg } from "@/components/ReMessageBox";
import DeviceAddGuide from "@/views/device/components/guid/index.vue";

defineOptions({
  name: "deviceManager"
});

// todo 悬浮样式
const currentPage = ref(""); // 当前选中的按钮

const setPage = (page: string) => {
  currentPage.value = page;
};

const addGuide = ref(true);

// const errorShow = ref(false);
const errorMsg = ref("这是错误提示语,目前通过辅助添加的开关控制，用于测试");

// const deleteDialogVisible = ref(false);

const showMsgTest = () => {
  showMsg(3, "这是错误提示语,目前通过辅助添加的开关控制，用于测试");
};
const currentStep = ref(0);
const addGuideShow = ref(false);
const addDevice = () => {
  currentStep.value = 1;
};

const guideTwo = ref(false);
const toTwoGuidePage = () => {
  guideTwo.value = true;
  // addGuideShow.value = false;
};

const guideThree = ref(false);
const toThreeGuidePage = () => {
  guideThree.value = true;
  // guideTwo.value = false;
};

const finishGuide = () => {
  guideThree.value = false;
};

const isUSBChecked = ref(false);
// const isUSBError = ref("找不到您的测试面板，请检查连接。");

const infoChecked = ref(false);

const addFinish = ref(false);
const addSuccess = ref();

const addErr = ref();

const radio1 = ref(0);

const isDialogVisible = ref(false);
const openDialog = async (dialog: number) => {
  currentStep.value = dialog;
  await nextTick();
  isDialogVisible.value = true;
};
</script>

<template>
  <div class="row-container" style="background-color: #f5f5f5">
    <el-row class="flex justify-between">
      <el-col :span="12">
        <div class="btn-group-div">
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="测试设备" :value="0" text-color="" />
            <el-radio-button label="模拟信号" :value="1" />
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tool-div flex justify-end">
          <!--搜索框-->
          <div class="search-div">
            <el-input class="search-input">
              <template v-slot:append>
                <div style="background-color: #323f77; padding: 0; margin: 0; width: 100%; height: 100%; align-items: center; border-radius: 1px">
                  <el-button text flex="1" type="primary" style="padding: 0; margin: 0; width: 100%; height: 100%">
                    <SearchIcon />
                  </el-button>
                </div>
              </template>
            </el-input>
          </div>
          <!--添加设备-->
          <el-button class="add-btn" @click="openDialog(1)">
            <AddDevIcon />
            添加设备
          </el-button>
          <!--引导-->
          <div class="add-guide-check">
            <el-checkbox v-model="addGuide" label="辅助添加" size="large" class="guide-checkbox" />
            <el-tooltip content="这是帮助引导的提示">
              <el-button text style="padding: 0; background: transparent; border: none; box-shadow: none" size="large" @click="showMsgTest">
                <GuideHelpIcon />
              </el-button>
            </el-tooltip>
            <!--<el-button-->
            <!--  text-->
            <!--  style="-->
            <!--    padding: 0;-->
            <!--    background: transparent;-->
            <!--    border: none;-->
            <!--    box-shadow: none;-->
            <!--  "-->
            <!--  size="large"-->
            <!--&gt;-->
            <!--  <GuideHelpIcon />-->
            <!--</el-button>-->
          </div>
        </div>
      </el-col>
    </el-row>
    <!--todo addGuide 需要改为errorShow,目前只是用于测试-->
    <el-row v-show="addGuide">
      <div
        style="
          display: flex;
          width: 100%;
          height: 48px;
          padding: 13px;
          flex-direction: column;
          justify-content: center;

          gap: 13px;
          flex-shrink: 0;
          border-radius: 5px;
          background: #8a1616;

          color: #ffffff;

          font-size: 19px;
          font-style: normal;
          font-weight: 400;
          line-height: 28px;
        "
      >
        {{ errorMsg }}
      </div>
    </el-row>
    <el-row>
      <div class="dev-content" style="width: 100%">
        <DeviceList />
      </div>
    </el-row>

    <!--<DeviceAddGuid :visible="addGuideShow" />-->
    <!--v-model="addGuideShow"-->
    <DeviceAddGuide :visible="isDialogVisible" />
  </div>
</template>

<style scoped lang="scss">
/*===========================================================*/
.row-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*===========================================================*/
/*tab页面按钮*/
//未选中
.page-btn {
  color: #2d3748;
  background-color: #ffffff;
}

// 选中
.page-btn.active {
  background: #323f77;
  color: #ffffff;
}

/*===========================================================*/
/*工具栏*/
.tool-div {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

/*搜索*/
.search-div {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

::v-deep(.el-input-group__append) {
  padding: 0;
  margin: 0;
  display: flex;
}

/*辅助添加*/
.add-guide-check {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-left: 15px;
}

.add-btn {
  margin-left: 15px;
}

.guide-checkbox {
  margin-right: 1px; /* 调整间距 */
}
</style>
